<template>
  <div class="privateContentPage">
    <div class="privateContent">
      <div class="title">
        <p>独家放送</p>
      </div>
      <div class="PrivateContentList">
        <div class="li" v-for="(item, index) in privateContentlist" :key="index" @click="toVideoPage(item.id)">
          <div class="img">
            <img :src="item.sPicUrl" />
            <i class="iconfont icon-circle-video"></i>
          </div>
          <div class="name">{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getPrivateContentList } from '../../../network/playlist.js'
export default {
  data () {
    return {
      privateContentlist: []
    }
  },
  methods: {
    getPrivateContentList () {
      getPrivateContentList().then(res => {
        // console.log(res.data)
        this.privateContentlist = res.data.result
        // console.log(this.privateContentlist)
      })
    },
    // MV播放页面
    toVideoPage (id) {
      this.$router.push('/video_player/' + id)
    }
  },
  created () {
    this.getPrivateContentList()
  }
}
</script>

<style lang="less" scoped>
  .privateContentPage {
    width: 82%;
    overflow: auto;
    .privateContent {
      width: 95%;
      margin: 20px auto;
      box-sizing: border-box;
      .title {
        padding-bottom: 10px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #e1e1e2;
        p {
          font-size: 30px;
        }
      }
      .PrivateContentList {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        padding: 15px 0;
        .li {
          width: 400px;
          margin-bottom: 35px;
          .img {
            position: relative;
            width: 100%;
            img {
              width: 100%;
            }
            i {
              color: #fff;
              font-size: 28px;
              background: rgba(0, 0, 0, 0.35);
              border-radius: 50%;
              position: absolute;
              top: 3%;
              left: 2%;
            }
            i:hover {
              background: rgba(0, 0, 0, 0.6)
            }
          }
          .name {
            // display: flex;
            // justify-content: flex-start;
          }
        }
      }
    }
  }

</style>
